<!DOCTYPE html>
<html lang="en">
<head>
	<title>上传下载</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="/template/js/jquery.js"></script>
	<style type="text/css">
		table, th, td {
		  border: 1px solid black;
		  border-collapse: collapse; /* 移除单元格之间的间隔 */
		}
	</style>
</head>
<body>
	<div>
		上传<br /><br />
		<div>
			<form action="/fileup" id="upload-form"  method="post" enctype="multipart/form-data">
			    选择文件:
			    <input type="file" id="fileUpload" name="file" id="file"><br /><br />
			    <input type="button" id="upload-btn" onclick="upfile()" value="上传文件">
			</form>
		</div>
		<div class="loading" style="display: none;"><img src="/template/img/loading.gif" /></div>
	</div>
</body>
<script type="text/javascript">
	function upfile(){
		shhiload(1)
		var formData = new FormData($('#upload-form')[0]);
		$.ajax({
            url: '/officeup',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response){
            	shhiload(0)
        		filist()
                alert(response.message);
            },
            error: function(){
            	shhiload(0)
                alert('文件上传失败');
            }
        });
	}

	function shhiload(e){
		if (e == 0){
			$('.loading').hide();
			$('#upload-btn').show();
		}else{
			$('.loading').show();
			$('#upload-btn').hide();
		}
	}

	function filist(){
		$.ajax({
		   	type: "POST",
		   	url: "/down",
		   	data: "file=",
		   	success: function(msg){
		   		if(msg.file_list.length > 0){
		   			let fileli = "<table>"
		   			fileli += "<tr><th>序号</th><th>名称</th><th>操作</th></th>"
		   			for (let i=0; i<msg.file_list.length; i++) {
		   				fileli += "<tr><td>"+(i+1)+"</td><td>"+msg.file_list[i]+"</td><td><a href='/template/public/"+msg.file_list[i]+"'>下载</a></td></tr>"
		   			}
		   			fileli += "</table>"
		   			$('.filelist').html(fileli)
		   		}
		     	console.log( msg.file_list.length );
		   	}
		});
	}
	filist()
</script>
</html>